<template>
    <div class="RulerMain">
        <div class="RulerMain-main">
            <router-view></router-view>
        </div>
        <div class="RulerMain-top">
            <Top/>
        </div>
        <div class="RulerMain-left">
            <RulerLeft/>
        </div>
    </div>
</template>

<script>
import Top from '../components/Top.vue'
import RulerLeft from '../components2/RulerLeft.vue'
import ViewDetails from './ViewDetails.vue'

export default {
    name:'RulerMain',
    components:{
        Top,RulerLeft,
        ViewDetails,
    },
    data(){
        return{
            
        }
    },
}
</script>

<style scoped>


.RulerMain-left{
    box-sizing: border-box;
  z-index: 1;
  bottom: 0;
  letter-spacing: 0;
  border-radius: 3px;
  margin: 6px;
  width: 200px;
  height: 89%;
  position: absolute;
  top: 49.3%;
  left: 90px;
  transform: translate(-44.5%, -45%);
}
.RulerMain{
    height: 735px;
    width: 1423px;
    background-image: linear-gradient(to right, #eeb5eb, #a1bce1);
}
.RulerMain-main{
    background: #fff;
  height: 89%;
  left: 215px;
  min-width: 690px;
  overflow-x: auto;
  position: absolute;
  top: 49.3%;
  width: calc(100% - 220px);
  box-sizing: border-box;
  border-radius: 3px;
  transform: translate(0, -44%);
}

.RulerMain-top{
    display: flex;
    height:66px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top:4.6%;
    left:50%;
    transform: translate(-50%,-50%);
    border-bottom:1px solid rgb(210,210,238) ;
}
</style>